<template>
	<div class="conPpageBox">
		<div class="header">
			<img @click="goback()" src="../../assets/images/guanbi.png" alt="" />
			<h2>填写资讯</h2>
		</div>
		<div class="fill-content">
			<h4>请填写资料才能进行此动作</h4>
			<div class="m-input-field">
				<div class="content required"
					:class="[focusnamestyle ? 'focus':'', blurnamestyle ? 'error':'', name != '' ? 'noempty' : '']">
					<div class="input-block">
						<label for="firstname">真实姓名</label>
						<input @focus="focusname()" @blur="blurname()" id="firstname" type="text" v-model="name">
					</div>
				</div>
				<div class="info-msg">
					<img v-if="!blurnamestyle" src="../../assets/images/zhuyi.png" alt="" />
					<img v-else src="../../assets/images/zhuyitow.png" alt="" />
					<div v-if="!blurnamestyle">必须与您的银行帐户姓名一致，否则无法进行取款</div>
					<div v-else class="warning">必填</div>
				</div>
			</div>
			<div class="m-input-field">
				<div class="content required"
					:class="[focuspsdstyle ? 'focus':'', blurpsdstyle ? 'error':'', psd != '' ? 'noempty' : '']">
					<div class="input-block">
						<label for="firstname">取款密码</label>
						<input @focus="focuspsd()" @blur="blurpsd()" id="firstname" :type="psdtype" v-model="psd">
					</div>
					<div class="action-block">
						<img v-if="psdtype == 'password'" @click="psdtype = 'text'"
							src="../../assets/images/jianjingguan.png" alt="" />
						<img v-if="psdtype == 'text'" @click="psdtype = 'password'"
							src="../../assets/images/yanjingkai.png" alt="" />
					</div>
				</div>
				<div class="info-msg">
					<img v-if="!blurpsdstyle" src="../../assets/images/zhuyi.png" alt="" />
					<img v-else src="../../assets/images/zhuyitow.png" alt="" />
					<div v-if="!blurpsdstyle">请输入您在本网站的取款密码</div>
					<div v-else class="warning">必填</div>
				</div>
			</div>
			<div class="btn-group">
				<el-button class="cancel" @click="goback()">取消</el-button>
				<el-button class="refresh" @click="submit()">更新</el-button>
			</div>
		</div>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</template>

<script>
	import {
		qkpsdbind
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			loadingFour
		},
		data() {
			return {
				name: '',
				psd: '',
				psdtype: 'password',
				focusnamestyle: false,
				blurnamestyle: false,
				focuspsdstyle: false,
				blurpsdstyle: false,
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
			}
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			focusname() {
				this.focusnamestyle = true
				this.blurnamestyle = false
			},
			blurname() {
				this.focusnamestyle = false
				if (this.name == '') {
					this.blurnamestyle = true
				}
			},
			focuspsd() {
				this.focuspsdstyle = true
				this.blurpsdstyle = false
			},
			blurpsd() {
				this.focuspsdstyle = false
				if (this.psd == '') {
					this.blurpsdstyle = true
				}
			},
			submit() {
				let that = this;
				if (this.name == '') {
					this.msgTextTow = '请输入真实姓名';
					this.isShowLoadingTeow = true;
					this.isShowCloseBot = false;
					setTimeout(() => {
						this.isShowLoadingTeow = false;
					}, 2000);
					// this.$message({
					// 	showClose: true,
					// 	message: '请输入真实姓名',
					// 	type: 'error'
					// });
					return false
				}
				if (this.psd == '') {
					this.msgTextTow = '请输入取款密码';
					this.isShowLoadingTeow = true;
					this.isShowCloseBot = false;
					setTimeout(() => {
						this.isShowLoadingTeow = false;
					}, 2000);
					// this.$message({
					// 	showClose: true,
					// 	message: '请输入取款密码',
					// 	type: 'error'
					// });
					return false
				}
				let data = {
					real_name: this.name,
					qk_password: this.psd
				}
				qkpsdbind(data).then((res) => {
					if (res.status.errorCode == 0) {
						// this.$message.success(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'success'
						// });
						setTimeout(function() {
							that.$router.push('/deposit')
						}, 1000)
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000);
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.conPpageBox {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.header {
		align-items: center;
		background-color: #fff;
		display: flex;
		height: 64px;
		justify-content: center;
		position: relative;
		border-bottom: 0 !important;
	}

	.header img {
		height: 32px;
		position: absolute;
		right: 0;
		top: calc(50% - 16px);
		width: 32px;
	}

	h2 {
		color: #545658;
		font-size: 16px;
		font-weight: 550;
	}

	.fill-content {
		background-color: #f9f9f9;
		min-height: calc(100vh - 64px);
		padding: 4%;
	}

	h4 {
		color: #939698;
		font-size: 12px;
		padding-bottom: 4%;
		text-align: center;
	}

	.m-input-field {
		margin-bottom: 10px;
		width: 100%;
	}

	.m-input-field .content {
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 15px;
	}

	.m-input-field .content {
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
	}

	.input-block {
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}

	label {
		padding-left: 12px;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		top: 18px;
		transition: .2s;
		color: #545658;
		font-family: NotoSans;
		font-size: 14px;
	}

	label:before {
		bottom: 0;
		color: #e94951;
		content: "*";
		font-size: 10px;
		left: 0;
		margin: auto;
		position: absolute;
		top: 4px;
	}

	.input-block input {
		background-color: transparent;
		color: #545658;
		outline: none;
	}

	.m-input-field .content .input-block input {
		border: none;
		box-sizing: border-box;
		height: 100%;
		position: absolute;
		top: 0;
		transition: .2s;
		width: 100%;
	}

	.m-input-field .content.focus {
		border: 1px solid #5235ff;
		background-color: #fff !important;
		border-color: rgba(114, 64, 255, .5) !important;
		box-shadow: 0 0 0 2px rgba(114, 64, 255, .1) !important;
	}

	.m-input-field .content.focus label,
	.m-input-field .content.noempty label {
		top: 8px;
	}

	.m-input-field .content.focus input,
	.content.noempty input {
		box-shadow: none;
		font-size: 14px;
		height: 28px !important;
		line-height: 1.13;
		top: 24px !important;
	}

	.m-input-field .content.error {
		border: 1px solid #e94951;
		color: #e94951;
	}

	.info-msg {
		color: #939698;
		font-family: PingFangTC;
		font-size: 10px;
		margin: 5px 0 10px;
		display: flex;
	}

	.info-msg img {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}

	.info-msg div {
		color: #939698;
		font-family: PingFangTC;
		font-size: 10px;
		line-height: 14px;
	}

	.info-msg .warning {
		color: #e94951;
		line-height: 14px;
		font-size: 13px;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 23.768%;
	}

	.cancel {
		background: #ccc;
		border-radius: 5px;
		color: #fff;
		font-family: NotoSans;
		font-size: 16px;
		font-weight: 500;
		padding: 10px 0;
		width: 48.695%;
		height: 44px;
	}

	.refresh {
		background: #5235ff;
		margin: auto;
		border-radius: 5px;
		color: #fff;
		font-family: NotoSans;
		font-size: 16px;
		font-weight: 500;
		padding: 10px 0;
		width: 48.695%;
		height: 44px;
	}

	.action-block {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 15%;
	}

	.action-block img {
		width: 24px;
		height: 24px;
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}
</style>